<!doctype html>
<html lang="en">
<head>
   <!--<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
   <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
   <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script> -->
   <title>Today's Temperature and Humidity data</title>
   <!-- // <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
   <!-- // <script src="http://code.highcharts.com/highcharts.js"></script> -->
   <script src="/jquery-2.1.4.min.js"></script>
   <script src="/Highcharts-4.2.1/js/highcharts.js"></script>
  
</head>
<body>
    <%#=@record.to_json%>
  <div id="container" style="min-width:350px;height:280px"></div>
  <div align="center">
    <%#=link_to "30 days' graph", gettemphumi_getmonthdata_path %>
    <%=link_to "Back", gettemphumi_index_path %>
  </div>
<script>
    $(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: "<%=@date%>" +':A Day T&H of graph'
        },
        // subtitle: {
        //     text: 'Source: WorldClimate.com'
        // },
        xAxis: [{
            categories: ['0','1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11', '12', '13', '14', '15', '16','17', '18', '19', '20', '21', '22','23']
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: '#89A54E'
                }
            },
            //min:-10,
            minRange: 0.2
        }, { // Secondary yAxis
            title: {
                text: 'Humidity',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value} %',
                style: {
                    color: '#4572A7'
                }
            },
           // min:0,
           minRange: 5,
             opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            x: 0,
            verticalAlign: 'top',
            y: 20,
            floating: false,
            backgroundColor: '#FFFFFF'
        },
        series: [{
            name: 'MaxT',
            //color: '#4572A7',
            color: '#89A54E',
            type: 'spline',
            //yAxis: 1,
            data: <%=@maxtemp.to_json%>,//[49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: '°C'
            }

        }, {
            name: 'MinT',
            //color: '#4572A7',
            color: '#89A54E',
            type: 'spline',
            //yAxis: 1,
            data: <%=@mintemp.to_json%>,//[49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: '°C'
            }

        },{
            name: 'MaxH',
            //color: '#89A54E',
            color: '#4572A7',
            type: 'spline',
            yAxis: 1,
            data: <%=@maxhumi.to_json%>,//[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            tooltip: {
                valueSuffix: '%'
            }
        },{
            name: 'MinH',
            //color: '#89A54E',
            color: '#4572A7',
            type: 'spline',
            yAxis: 1,
            data: <%=@minhumi.to_json%>,//[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            tooltip: {
                valueSuffix: '%'
            }
        }]
    });
});

Highcharts.theme = { 
   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
    chart: { 
      backgroundColor: { 
                           linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, 
                                    stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)'] ] 
                        },
                           borderWidth: 2, 
                           plotBackgroundColor: 'rgba(255, 255, 255, .9)', 
                           plotShadow: true, plotBorderWidth: 1 
                     }, 
       title: { 
                  style: { color: '#000', font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' } 
               }, 

       subtitle: { 
                  style: { color: '#666666', font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' } 
               },

       legend: { 
                  itemStyle: { font: '9pt Trebuchet MS, Verdana, sans-serif', color: 'black' }, 
               itemHoverStyle: { color: '#039' }, itemHiddenStyle: { color: 'gray' } 
               },

       labels: { 
                  style: { color: '#99b' } 
               },

       navigation: { buttonOptions: { theme: { stroke: '#CCCCCC' } } } 
    }; 
// Apply the theme 
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
  </script>
</body>
</html>
